<template>
  <div class="flow-row">
    <div class="flow-box">
      <div
        class="flow-item"
        :class="{ 'flow-item-active': isActive }"
        @click="!readable && open('flowWriteSetting', node)"
      >
        <div class="flow-node-box" :class="{ 'has-error': node.config.error }">
          <div class="node-name" :class="nameClass(node, 'node-fill')">
            <EditName v-model:value="node.name" />
            <el-icon style="margin-left: 10px">
              <Edit />
            </el-icon>
          </div>
          <div class="node-main">
            <span v-if="node.content">
              表单权限: {{ node.content }}
            </span>
            <span v-else class="hint-title">默认表单全可编辑</span>
          </div>
          <!-- 错误提示 -->
          <i
            v-if="node.config.error"
            theme="filled"
            class="node-error el-icon-edit"
          ></i>
          <!-- 只有是填写节点才能删除，发起节点不能删除 -->
          <div
            v-if="!readable && !node.config.eletable && node.type == 6"
            class="close-icon"
          >
            <el-icon @click.stop="node.config.deletable = true">
              <CircleClose />
            </el-icon>
          </div>
          <!-- 删除提示 -->
          <DeleteConfirm :node="node" />
        </div>
      </div>
      <FlowAddNode
        :node="node"
        @update:node="node = $event"
        :nodeType="6"
        :readable="readable"
      />
    </div>
    <FlowRootDrawer ref="flowRootDrawer" @close="isActive = false" />
  </div>
</template>
<script setup name="FlowRootNode">
import flowhook from "../../../mixins/flowhook";
import FlowAddNode from "../flowAddNode.vue";
import FlowRootDrawer from "../drawer/FlowRootDrawer.vue";
import EditName from "../../../common/EditName.vue";
import DeleteConfirm from "../../../common/DeleteConfirm.vue";
import {
  reactive,
  ref,
  createApp,
  
  
  computed,
  onMounted,
  toRefs,
} from "vue";
const { uuid, nameClass, delNode } = flowhook();

const flowRootDrawer = ref(null);

const isActive = ref(false);

const props = defineProps({
  node: {
    type: Object,
    default: function () {
      return {};
    },
  },
  readable: {
    type: Boolean,
    default: false,
  },
});

const { node, readable } = toRefs(props);

const open = (name, node, routeNode) => {
  console.log("------开始提示-------");
  isActive.value = true;
  flowRootDrawer.value.showDrawer(node, routeNode);
};

// export default {
//   name: 'WriteNode',
//   components: {FlowAddNode, EditName, DeleteConfirm},
//   mixins: [flowMixin],
//   props: {
//     node: {
//       type: Object,
//       default: function () {
//         return {};
//       },
//     },
//     readable: {
//       type: Boolean,
//       default: false,
//     },
//   },
//   data() {
//     return {};
//   },
//   methods: {},
// };
</script>
